<template>
  <a-form-model
    ref="form"
    :model="form"
    :rules="formRules"
    :hideRequiredMark="title == '详情'"
  >
    <div class="form-content">
      <a-row>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="设计强度(MPa)：" prop="designStrength">
            <a-select
              placeholder="请选择设计强度"
              v-model="form.designStrength"
              :disabled="title == '详情'"
            >
              <a-select-option
                :value="v"
                v-for="(v, i) in designStrengths"
                :key="i"
              >
                {{ v }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="试件类型：" prop="size">
            <a-select
              placeholder="请选择试件类型"
              v-model="form.size"
              :disabled="title == '详情'"
            >
              <a-select-option
                :value="v.dicValue"
                v-for="v in sizes"
                :key="v.id"
              >
                {{ v.dicDesc }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="制作方法：" prop="productionMethod">
            <a-select
              placeholder="请选择制作方法"
              v-model="form.productionMethod"
              :disabled="title == '详情'"
            >
              <a-select-option
                :value="v.dicValue"
                v-for="v in methods"
                :key="v.id"
              >
                {{ v.dicDesc }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="读数标准：" prop="readStandard">
            <a-select
              placeholder="请选择读数标准"
              v-model="form.readStandard"
              :disabled="title == '详情'"
            >
              <a-select-option
                :value="v.dicValue"
                v-for="v in standards"
                :key="v.id"
              >
                {{ v.dicDesc }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="混合料名称：" prop="mixtureName">
            <a-input
              placeholder="请输入混合料名称"
              v-model="form.mixtureName"
              :disabled="title == '详情'"
              :maxLength="50"
            />
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="施工桩号：" prop="pileNo">
            <a-input
              placeholder="请输入施工桩号"
              v-model="form.pileNo"
              :disabled="title == '详情'"
              :maxLength="200"
            />
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="结合料说明：" prop="matrixExplain">
            <a-input
              placeholder="请输入结合料说明"
              v-model="form.matrixExplain"
              :disabled="title == '详情'"
              :maxLength="100"
            />
          </a-form-model-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
          <a-form-model-item label="试验依据：">
            <a-input
              placeholder="请输入试验依据"
              v-model="form.trialBasis"
              :disabled="title == '详情'"
              :maxLength="100"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
    </div>
  </a-form-model>
</template>
<script>
import { trialInfo } from "@/api/wisdom-beam/trial-app";
export default {
  props: ["title", "trialNum"],
  watch: {
    trialNum: {
      handler(val) {
        if (val) {
          this.trialInfo();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      form: {
        designStrength: undefined, //设计强度
        size: undefined, //试件类型
        productionMethod: undefined, //制作方法
        readStandard: undefined, //读数标准
        mixtureName: "", //混合料名称
        pileNo: "", //施工桩号
        matrixExplain: "", //结合料说明
        trialBasis: "", //试验依据
      },
      formRules: {
        designStrength: [
          {
            required: true,
            message: "请选择设计强度",
            trigger: "change",
          },
        ],
        size: [
          {
            required: true,
            message: "请选择试件类型",
            trigger: "change",
          },
        ],
        productionMethod: [
          {
            required: true,
            message: "请选择制作方法",
            trigger: "change",
          },
        ],
        readStandard: [
          {
            required: true,
            message: "请选择读数标准",
            trigger: "change",
          },
        ],
        mixtureName: [
          {
            required: true,
            message: "请输入混合料名称",
            trigger: "blur",
          },
        ],
        pileNo: [
          {
            required: true,
            message: "请输入施工桩号",
            trigger: "blur",
          },
        ],
        matrixExplain: [
          {
            required: true,
            message: "请输入结合料说明",
            trigger: "blur",
          },
        ],
      },
      designStrengths: [],
      sizes: [],
      methods: [],
      standards: [],
    };
  },
  mounted() {
    this.form = {
      designStrength: undefined, //设计强度
      size: undefined, //试件类型
      productionMethod: undefined, //制作方法
      readStandard: undefined, //读数标准
      mixtureName: "", //混合料名称
      pileNo: "", //施工桩号
      matrixExplain: "", //结合料说明
      trialBasis: "", //试验依据
    };
  },
  methods: {
    validateHandle() {
      let status = "";
      this.$refs["form"].validate((val) => {
        if (val) {
          status = true;
        } else {
          status = false;
        }
      });
      return status;
    },
    // 试验信息
    trialInfo() {
      trialInfo({
        trialNum: this.trialNum,
      })
        .then((res) => {
          let {
            data: { result },
          } = res;
          this.designStrengths = result.designStrengths || [];
          this.sizes = result.sizes || [];
          this.methods = result.methods || [];
          this.standards = result.standards || [];
        })
        .catch((_) => {});
    },
  },
};
</script>
<style lang="less" scoped>
.form-content {
  padding: 0 120px 0 20px;
}
/deep/.ant-form-item {
  display: flex;
  .ant-form-item-label {
    width: 160px;
    min-width: 160px;
    white-space: pre-wrap;
    display: flex;
    justify-content: flex-end;
    line-height: 20px;
    align-items: center;
    height: 36px;
    label {
      color: #999999;
    }
  }
  .check-item-select {
    height: 126px;
    .ant-select-selection__rendered {
      height: 126px;
      .ant-select-selection__placeholder {
        margin-top: -40px !important;
      }
    }
  }
  .ant-form-item-control-wrapper {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
/deep/.ant-calendar-picker {
  width: 100%;
  min-width: unset !important;
}
</style>
